<template lang="wxml">
	<view class="home">
		
        <search/>
		

		<!-- 轮播图 -->
		<swiper class="swiper">
			<swiper-item :key="banner.goods_id" v-for="banner in bannerList">
				<navigator :url="'/pages/goods/index?id=' + banner.goods_id">
					<image :src="banner.image_src"></image>
				</navigator>
			</swiper-item>

		</swiper>


		<!-- 导航区 -->
		<view class="nav">
			<navigator v-for="nav in navList" :key="nav.name" :url="nav.navigator_url">
				<image :src="nav.image_src" />
			</navigator>
		</view>


		<!-- 楼层数据 -->
		<view class="floors">
			<view :key="" v-for="(floor, index) in floorList" class="floor">
				<view class="title">
				<image :src="floor.floor_title.image_src"></image>
				</view>
				<view class="imgs">
				<navigator class="item" :key="key" v-for="(product, key) in floor.product_list" url="/pages/list/index">
					<image :src="product.image_src"></image>
				</navigator>
				</view>
			</view>
		</view>

    <!-- 回到顶部 -->
    <view v-show="isTop" @click="goTop" class="goTop icon-top">↑</view>


	</view>
</template>

<script>
// 1.导入
import search from "../../components/search/index";
export default {
    // 2.注册
    components: {
        search,
    },

    data() {
        return {
            // 轮播图数据
            bannerList: "",
            // 导航数据
            navList: "",
            // 楼层数据
            floorList: "",
            // 页面高度
            scrollTop: 0,
            // 回到顶部显示隐藏
            isTop: false,
        };
    },

    //
    methods: {
        // 轮播图数据
        async getBannerList() {
            // 请求后端接口
            const { message } = await this.request({
                url: "/api/public/v1/home/swiperdata",
            });

            this.bannerList = message;
        },

        // 导航数据
        async getnavList() {
            const { message } = await this.request({
                url: "/api/public/v1/home/catitems",
            });
            this.navList = message;
        },

        // 导航数据
        async getFloorList() {
            const { message } = await this.request({
                url: "/api/public/v1/home/floordata",
            });
            this.floorList = message;
        },

        // 监听用户的下拉操作
        async onPullDownRefresh() {
            await this.getBannerList();
            await this.getnavList();
            await this.getFloorList();
            // 通过调用api可以主动停止下拉加载动效
            uni.stopPullDownRefresh();
        },

        // 回到顶部
        goTop() {
            uni.pageScrollTo({
                scrollTop: 0,
            });
        },

        onPageScroll(ev) {
            this.scrollTop = ev.scrollTop;
            // 显示回到顶部按钮的条件，滚动高度大于半屏幕高度
            if (this.scrollTop > uni.getSystemInfoSync().windowHeight / 2) {
                this.isTop = true;
            } else {
                this.isTop = false;
            }
        },
    },

    onLoad() {
        this.getBannerList();
        this.getnavList();
        this.getFloorList();
    },
};
</script>

<style lang="less">
.swiper {
    height: 340rpx;
    image {
        width: 750rpx;
        height: 340rpx;
    }
}

.nav {
    display: flex;
    navigator {
        flex: 1;
        text-align: center;
        image {
            width: 128rpx;
            height: 140rpx;
            margin: 20rpx 0;
        }
    }
}

.floors {
    // 公共楼层
    .floor {
        .title {
            box-sizing: border-box;
            padding-top: 20rpx;
            padding-left: 16rpx;
            background-color: #f4f4f4;
            image {
                width: 100%;
                height: 60rpx;
            }
        }
        .imgs {
            padding: 20rpx 12rpx;
            overflow: hidden;
            .item {
                float: left;
                margin-right: 10rpx;
                margin-bottom: 10rpx;
            }
            .item image {
                width: 100%;
                height: 100%;
            }
            .item:nth-child(1) {
                width: 232rpx;
                height: 386rpx;
            }
            .item:nth-child(2),
            .item:nth-child(5) {
                width: 273rpx;
                height: 188rpx;
            }
            .item:nth-child(3),
            .item:nth-child(4) {
                width: 203rpx;
                height: 188rpx;
            }
            // 3 5 没有右侧margin
            .item:nth-child(3),
            .item:nth-child(5) {
                margin-right: 0;
            }
        }
    }

    // 第一楼层：less嵌套结构，在下面覆盖上面样式的话，注意嵌套结构一样；
    .floor:nth-child(1) {
        .imgs {
            // n:0; 2 3 4 5
            .item:nth-child(n + 2) {
                width: 236rpx;
                height: 188rpx;
            }
        }
    }
}

.goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
}
</style>
